<template>
    <div class="page-lock-record">
        <div class="list">
            <block v-if="list && list.length">
                <div class="item" v-for="(item, index) in list" :key="index">
                    <div class="inner-box">
                        <div class="cover">
                            <img class="image" :src="item.cover" mode="aspectFill" />
                        </div>
                        <div class="info">
                            <div class="name text-normal font-bold">{{item.shop}}</div>
                            <div class="rank text-small">总奖励金额：{{item.quota}}元</div>
                            <div class="rank text-small">已解锁奖励金额：{{item.rebate}}元</div>
                            <div class="rank text-small">剩余锁定奖励金额：{{item.lock}}元</div>
                        </div>
                    </div>
                </div>
            </block>
            <ListEmpty v-else />
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    currency,
    placeholderImg,
} from '@/lib/utils';
import ListEmpty from '@/components/list/listEmpty.vue';

import { Component, Vue } from 'vue-property-decorator';

/** 加盟代理 */
@Component({
    name: 'PartnerLockRecord',
    components: {
        ListEmpty,
    },
})
export default class PartnerLockRecord extends Vue {
    public placeholderImg: any = placeholderImg;

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    public get memberShopList() {
        return store.state.user.memberShopList;
    }

    public get list() {
        return this.memberShopList.map((item: any) => Object.assign(
            JSON.parse(JSON.stringify(item)), {
                quota: currency(item.quota),
                rebate: currency(item.rebate),
                lock: currency(item.quota - item.rebate),
            }
        ));
    }

    public async created() {
        store.commit('utils/startRequest');
        await store.dispatch('user/getMemberShopList', true);
        store.commit('utils/endRequest');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-lock-record {
    .list {
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            &:not(:last-child) {
                border-bottom: 2rpx solid #ebebeb;
            }
            .inner-box {
                display: flex;
                align-items: center;
            }
            .cover {
                width: 95px;
                height: 63px;
                margin-right: 10px;
                border-radius: 14rpx;
            }
            .image {
                width: 100%;
                height: 100%;
                border-radius: 14rpx;
            }
        }
    }
}

</style>
